import React, { Component } from "react";
import { connect } from "react-redux";
import * as actions from "./action.js";

class HomePage extends Component {
    componentDidMount() {
        // 第一种调度方式
        // let dispatch = this.props.dispatch;
        // dispatch(actions.getList())
        // 第二种调度方式，通过connect方法的方式
        this.props.getList();
    }
    textInput(input) {
        if (input) {
            input.focus();
        }
    }

    render() {
        return (
            <div className="homePage">
                <div>首页</div>
                <input
                    type="text"
                    placeholder="ref自动获取焦点"
                    ref={this.textInput}
                />
                {this.props.list.map((ele, index) => (
                    <div key={ele.text}>{ele.text}</div>
                ))}
                {this.props.commonState}
            </div>
        );
    }
}

const mapStateToProps = (state, ownProps) => ({
    list: state.homePage.list,
    commonState: state.commonState.name
});
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        getList: () => {
            dispatch(actions.getList());
        }
    };
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(HomePage);
